<script setup>
import { ref, reactive } from "vue";
let name = ref("");
let id1 = ref();
let New = ref(false);
let top = ref(false);
let came=ref('');
let all = reactive([{ id: 1, shi: "吃饭" }]);
id1 = all[0].id - 1;

function btnAdd() {
  id1 = all[id1].id;
  console.log(id1);
  all.push({ id: id1 + 1, shi: name.value });
  name.value = "";
  console.log(all);
}

function btnDel(id) {
  all.splice(id-1,1)
}

function btnEdit(id) {
  New.value=true;
  top.value=true;
 came.value=all[id-1].shi
 console.log(id);

}
function delAll() {
  all.length=0;
}
function btnSave(id){
  New.value=false;
  top.value=false;
  let id1=all.find(item=>item.id==id-1);
  id1.shi=came.value
  console.log(id1.shi);
}
</script>

<template>
  <div class="big">
    <div class="return">
      <textarea name="shi" id v-model="name"></textarea>
      <input type="button" value="添加" @click="btnAdd" />
    </div>
    <div class="table">
      <table class="tb">
        <tr v-for="item in all" :key="item.id">
          <td>{{ item.shi }}</td>
          <td>
            <input type="checkbox" name="flesh" />完成
          </td>
          <td>
            <input type="button" value="删除" @click="btnDel(item.id)" />
            <input type="button" value="编辑" @click="btnEdit(item.id)" />
          </td>
        </tr>
      </table>
      
    </div>
    <div class="all">
      <input type="button" value="删除所有" @click="delAll" />
    </div>

    <div class="top" v-show="top">
        <div class="height">
          <input type="text" placeholder="请输入更新的内容" v-model="came" v-show="New"/>
          <input type="button" value="保存" v-show="New" @click="btnSave(i.id)"  v-for="i in all" :key="i.id" >
      </div>
    </div>
  </div>
</template>

<style scoped>

.top{
  position: fixed;
  top: 120px;
  left: 350px;
  width: 500px;
  height: 500px;
  background-color: rgba(23, 125, 139, 0.5);
}
.height{
  position: relative;
  top: 180px;
  left: 120px;
}
.big {
  border: 1px solid;
  padding: 10px;
  border-radius: 5px;
}
.return {
  width: 50%;
}
.tb {
  border: 1px solid;
  border-collapse: collapse;
}
td {
  background: rgba(16, 184, 206, 0.5);
  margin: 5px;
}
textarea {
  height: 121px;
  width: 221px;
}
</style>
